{% extends 'base.html' %}

{% block title %}实验详情 - 机械臂实验系统{% endblock %}

{% block extra_css %}
<style>
    .detail-container {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .experiment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .status-badge {
        padding: 6px 15px;
        border-radius: 20px;
        font-size: 0.8rem;
        color: white;
    }
    
    .badge-pending {
        background-color: #6c757d;
    }
    
    .badge-in_progress {
        background-color: #17a2b8;
    }
    
    .badge-completed {
        background-color: #28a745;
    }
    
    .badge-failed {
        background-color: #dc3545;
    }
    
    .experiment-info {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 2rem;
    }
    
    .info-row {
        display: flex;
        margin-bottom: 10px;
    }
    
    .info-label {
        width: 120px;
        font-weight: bold;
        color: #495057;
    }
    
    .info-value {
        flex: 1;
    }
    
    .timeline-container {
        position: relative;
        margin-top: 30px;
    }
    
    .timeline-line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 30px;
        width: 2px;
        background-color: #dee2e6;
    }
    
    .timeline-item {
        position: relative;
        padding-left: 60px;
        margin-bottom: 30px;
    }
    
    .timeline-dot {
        position: absolute;
        left: 24px;
        top: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: #6c757d;
        border: 2px solid #fff;
        z-index: 1;
    }
    
    .timeline-dot.completed {
        background-color: #28a745;
    }
    
    .timeline-card {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }
    
    .timeline-header {
        padding: 15px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .timeline-body {
        padding: 20px;
        background-color: #fff;
    }
    
    .step-info {
        display: flex;
        flex-wrap: wrap;
    }
    
    .step-info-item {
        margin-right: 30px;
        margin-bottom: 10px;
    }
    
    .step-info-label {
        font-size: 0.8rem;
        color: #6c757d;
    }
    
    .step-info-value {
        font-size: 0.95rem;
        font-weight: 500;
    }
    
    .success-icon {
        color: #28a745;
    }
    
    .pending-icon {
        color: #ffc107;
    }
</style>
{% endblock %}

{% block content %}
<div class="detail-container">
    <div class="experiment-header">
        <h2>实验详情</h2>
        <span class="status-badge badge-{{ experiment.status }}">
            {{ experiment.get_status_display }}
        </span>
    </div>
    
    <div class="experiment-info">
        <div class="row">
            <div class="col-md-6">
                <div class="info-row">
                    <div class="info-label">实验ID:</div>
                    <div class="info-value">{{ experiment.id }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">用户:</div>
                    <div class="info-value">{{ experiment.user.username }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">开始时间:</div>
                    <div class="info-value">{{ experiment.start_time|date:"Y-m-d H:i:s" }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">结束时间:</div>
                    <div class="info-value">
                        {% if experiment.end_time %}
                            {{ experiment.end_time|date:"Y-m-d H:i:s" }}
                        {% else %}
                            -
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="info-row">
                    <div class="info-label">当前步骤:</div>
                    <div class="info-value">{{ experiment.get_current_step_display }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">状态:</div>
                    <div class="info-value">{{ experiment.get_status_display }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">是否成功:</div>
                    <div class="info-value">
                        {% if experiment.success %}
                            <span class="text-success"><i class="bi bi-check-circle-fill"></i> 成功</span>
                        {% else %}
                            {% if experiment.status == 'completed' %}
                                <span class="text-danger"><i class="bi bi-x-circle-fill"></i> 失败</span>
                            {% else %}
                                <span class="text-secondary">未完成</span>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">备注:</div>
                    <div class="info-value">
                        {% if experiment.notes %}
                            {{ experiment.notes }}
                        {% else %}
                            -
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <h3 class="mb-3">实验步骤记录</h3>
    
    <div class="timeline-container">
        <div class="timeline-line"></div>
        
        {% for step in steps %}
            <div class="timeline-item">
                <div class="timeline-dot {% if step.is_completed %}completed{% endif %}"></div>
                <div class="timeline-card">
                    <div class="timeline-header">
                        <h5 class="mb-0">步骤 {{ step.step_number }}: {{ experiment.get_current_step_display }}</h5>
                        <div>
                            {% if step.is_completed %}
                                <span class="success-icon"><i class="bi bi-check-circle-fill"></i> 已完成</span>
                            {% else %}
                                <span class="pending-icon"><i class="bi bi-clock"></i> 进行中</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="timeline-body">
                        <div class="step-info">
                            <div class="step-info-item">
                                <div class="step-info-label">开始时间</div>
                                <div class="step-info-value">{{ step.start_time|date:"Y-m-d H:i:s" }}</div>
                            </div>
                            <div class="step-info-item">
                                <div class="step-info-label">结束时间</div>
                                <div class="step-info-value">
                                    {% if step.end_time %}
                                        {{ step.end_time|date:"Y-m-d H:i:s" }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                            <div class="step-info-item">
                                <div class="step-info-label">用时</div>
                                <div class="step-info-value">
                                    {% if step.end_time %}
                                        {{ step.end_time|timeuntil:step.start_time }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            {% if step.step_number == 1 %}
                                <p>定位螺丝操作，通过控制机械臂移动到目标螺丝位置。</p>
                            {% elif step.step_number == 2 %}
                                <p>扣住螺丝操作，控制机械臂末端执行器准确扣住螺丝。</p>
                            {% elif step.step_number == 3 %}
                                <p>拧下螺丝操作，通过机械臂旋转功能将螺丝拧出。</p>
                            {% elif step.step_number == 4 %}
                                <p>放入盒子操作，将拧下的螺丝移动到收集盒中。</p>
                            {% elif step.step_number == 5 %}
                                <p>实验完成，所有步骤已成功执行。</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="alert alert-info mt-3">
                暂无步骤记录
            </div>
        {% endfor %}
    </div>
    
    <div class="mt-4 mb-5 text-center">
        <a href="{% url 'experiment_history' %}" class="btn btn-secondary me-2">
            返回实验记录
        </a>
        
        {% if experiment.status == 'in_progress' %}
            <a href="{% url 'experiment_platform' %}" class="btn btn-primary">
                继续实验
            </a>
        {% else %}
            <a href="{% url 'experiment_platform' %}" class="btn btn-primary">
                开始新实验
            </a>
        {% endif %}
    </div>
</div>
{% endblock %} 